<template>
  <view class="container">
    <image class="walletBg" src="../../static/images/walletBg.png" mode="aspectFill"></image>
    <view class="tp">
      <uv-navbar title="钱包" placeholder leftIconColor="#fff" bgColor="rgba(0,0,0,0)" :titleStyle="{'color':'#fff'}"
        autoBack></uv-navbar>
      <view class="walletInfo">
        <view class="linner">
          <view class="canuse">
            <view class="canuse-title">
              大健康(元)
            </view>
            <view class="canuse-money">
              {{cardInfo.great_health_money}}
            </view>
          </view>
        </view>
        <view class="linner" style="position: absolute;bottom: 62rpx;width: 100%;align-items: end;">
          <view class="canuse">
            <view class="canuse-title">
              小厨房
            </view>
            <view class="canuse-money">
              {{cardInfo.all_categories_money}}
            </view>
          </view>
          <view class="tixian_btn" @click="toTixian">
            充值
          </view>
        </view>
      </view>
    </view>
    <view class="menu">
      <view class="menu-item" @click="toPage('2')">
        <view class="label">
          充值记录
        </view>
        <image class="arrow_icon" src="/static/images/arrow.png" mode=""></image>
      </view>
      <view class="menu-item" @click="toPage('1')">
        <view class="label">
          消费记录
        </view>
        <image class="arrow_icon" src="/static/images/arrow.png" mode=""></image>
      </view>
    </view>
    <uv-popup ref="popup" mode="center" round="20">
      <view class="dialog">
        <view class="dialog-title">
          礼品卡充值
        </view>
        <input type="text" class="dialog-ipt" v-model="fromLine.car_number" placeholder="请输入卡号" placeholder-class="styles" />
        <input type="text" class="dialog-ipt" v-model="fromLine.car_password" placeholder="请输入卡密" placeholder-class="styles" />
        <view class="dialog-foot">
          <view class="close-txt" @click="onClose">
            取消
          </view>
          <view class="save-txt" @click="onSave">确定</view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
    import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        fromLine: {
          car_number: "",
          car_password: ""
        },
        cardInfo: {}
      }
    },
    onLoad() {
      this.getCardInfo();
    },
    methods: {
      toTixian() {
        this.$refs.popup.open();
      },
      getCardInfo(){
        reqApi.personInfo({}).then(res => {
          uni.setStorageSync("cardInfo", res.data);
          this.cardInfo = res.data;
        })
      },
      onClose(){
        this.$refs.popup.close();
      },
      onSave(){
        reqApi.chongzhicard(this.fromLine).then(res=>{
          uni.showToast({
            title: "充值成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(()=>{
            this.fromLine.car_number = "";
            this.fromLine.car_password = "";
            this.$refs.popup.close();
          }, 1500)
        })
      },
      toPage(temp) {
        switch (temp) {
          case '1':
            uni.navigateTo({
              url: "/pages/mine/lixiao?type=1"
            })
            break;
          case '2':
            uni.navigateTo({
              url: "/pages/mine/lixiao?type=2"
            })
            break;
          default:
            break;
        }
      }
    }
  }
</script>
<style>
  .styles{
    font-weight: 600;
    font-size: 28rpx;
    color: #AAAAAA;
  }
</style>
<style lang="scss" scoped>
  .dialog{
    width: 680rpx;
    padding: 40rpx;
    box-sizing: border-box;
    .dialog-title{
      font-weight: 600;
      font-size: 34rpx;
      color: #333;
      text-align: center;
    }
    .dialog-ipt{
      height: 90rpx;
      background: #F0F0F0;
      border-radius: 16rpx;
      font-weight: 600;
      font-size: 28rpx;
      color: #333333;
      margin-top: 30rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
    }

    .dialog-foot{
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      .close-txt{
        width: 288rpx;
        height: 88rpx;
        background: #F0F0F0;
        border-radius: 110rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #909090;
        text-align: center;
        line-height: 88rpx;
      }
      .save-txt{
        width: 288rpx;
        height: 88rpx;
        background: #F86F03;
        border-radius: 110rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #fff;
        text-align: center;
        line-height: 88rpx;
      }
    }
  }
  .container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #fff;

    .walletBg {
      width: 100vw;
      height: 490rpx;
      position: relative;
      top: 0;
      left: 0;
      z-index: 10;
    }

    .tp {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 50;
      width: 100%;
      height: 490rpx;

      .walletInfo {
        padding: 50rpx 30rpx 30rpx 30rpx;
        box-sizing: border-box;

        .linner {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .canuse {
            .canuse-title {
              font-weight: 500;
              font-size: 28rpx;
              color: #FFFFFF;
            }

            .canuse-money {
              font-weight: bold;
              font-size: 64rpx;
              color: #FFFFFF;
              margin-top: 20rpx;
            }
          }

          .tixian_btn {
            width: 270rpx;
            height: 68rpx;
            background: #FFFFFF;
            border-radius: 34rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #F86F03;
            text-align: center;
            line-height: 68rpx;
          }
        }
      }
    }

    .menu {
      padding: 0 30rpx;
      box-sizing: border-box;
      border-radius: 32rpx;
      position: relative;
      top: -32rpx;
      z-index: 50;
      background: #fff;

      .menu-item {
        border-bottom: 2rpx solid #eee;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .label {
          font-weight: 500;
          font-size: 32rpx;
          color: #000000;
        }

        .arrow_icon {
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
  }
</style>